<template>
  <div class="app-container customer-div">
    <div>
      <!--搜索-->
      <el-form
        :inline="true"
        :model="listQuery"
        size="mini"
        label-width="100px"
      >
        <el-form-item label="日期：">
            <el-date-picker
              v-model="listQuery.date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 图表 -->
    <div
      class="box1"
      id="echart2"
      style="height: 400px; margin-top: 20px"
      v-loading="loadingChart"
    ></div>
    <!--数据列表-->
    <div style="width: 1082px;">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        height="300"
      >
        <el-table-column label="日期" align="center" min-width="130" prop="date">
        </el-table-column>
        <el-table-column label="预计跟进总数" align="center" min-width="150" prop="expectTrackingSum">
        </el-table-column>
        <el-table-column label="日常" align="center" min-width="150" prop="daily">
        </el-table-column>
        <el-table-column label="拜访" align="center" min-width="150" prop="visit">
        </el-table-column>
        <el-table-column label="成交" align="center" min-width="150" prop="deal">
        </el-table-column>
        <el-table-column label="实际跟进总数" align="center" min-width="150" prop="realTrackingTotal">
        </el-table-column>
        <el-table-column label="完成率" align="center" min-width="150" prop="trackingEndRate">
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10, 15, 20]"
        :total="count"
      >
      </el-pagination>
    </div> -->
  </div>
</template>
<script>
import { getCustomerFollowDayListAPI } from "@/api/fms.js";
import echarts from "echarts";
import "@/utils/jQuery.print";
import { formatDate } from "@/utils/date";
import { mapGetters } from "vuex";
const defaultListQuery = {
  date:[]
};
export default {
  name: "customerFollowDayReport",
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      xList: [],
      expectTrackingSum: [],
      realTrackingTotal:[],
      // count: 0,
      listLoading: false,
      loadingChart: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "30天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  created() {
    let now = new Date();
    let today = formatDate(now, "yyyy-MM-dd");
    this.listQuery.date = [today, today];
    this.getList()
  },
  mounted() {
  },
  filters: {},
  components: {},
  methods: {
    initEcharts2() {
      var myChart = echarts.init(document.getElementById("echart2"));
      var option = {
        title: {
          text: "客户跟进日报表",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          name: "日期",
          axisLabel: {
            interval: 0,
            rotate: 45
          },
          data: this.xList,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        series: [
          {
            name: "预计跟进总数",
            type: "bar",
            data: this.expectTrackingSum,
            barMaxWidth: 30,
            itemStyle: {
              color: "#91cc75",
            },
          },
          {
            name: "实际跟进总数",
            type: "bar",
            data: this.realTrackingTotal,
            barMaxWidth: 30,
            itemStyle: {
              color: "#fac858",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //获取列表
    async getList() {
      this.listLoading = true;
      this.loadingChart = true
      this.tableData = []
      this.xList = []
      this.expectTrackingSum = []
      this.realTrackingTotal = []
      const res = await getCustomerFollowDayListAPI(this.listQuery)
      if (res.list.length) {
        this.tableData = res.list
        this.xList=res.total.dateByX
        res.total.trackingDataByY.forEach((item) => {
          this.expectTrackingSum.push(item.data1),
          this.realTrackingTotal.push(item.data2)
        })
        this.listLoading = false;
        this.loadingChart = false
        this.initEcharts2();
      } else {
        this.listLoading = false;
        this.loadingChart = false
        this.initEcharts2();
      }
    },
    // handleSizeChange(val) {
    //   this.listQuery.pageNum = 1;
    //   this.listQuery.pageSize = val;
    //   this.getList();
    // },
    // handleCurrentChange(val) {
    //   this.listQuery.pageNum = val;
    //   this.getList();
    // },
    handleSearchList() {
      // this.listQuery.pageNum = 1;
      this.getList();
    },
  },
};
</script>



